<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>流程管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="${resource }/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="${resource }/css/iconfont.css">
		<script src="${resource }/js/jquery-2.1.1.min.js"></script>
		<script src="${resource }/js/jquery.form.js"></script>
		<script src="${resource }/js/bootstrap.min.js?v=3.4.0"></script>
		<!-- 分页插件，依赖于jquery位于jquery之后 -->
		<script src="${resource }/js/page.js"></script>
	</head>

	<body>

		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-sm-4">
				<h2>流程管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="tomain.do">主页</a>
					</li>
					<li>
						<strong>流程列表</strong>
					</li>
				</ol>
			</div>
		</div>
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-md-12">
				<!-- 用户列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						流程列表
					</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div class="table-responsive">
							<div class="text-center">
								<a data-toggle="modal" class="btncs btn btn-primary" href="flowmanage.jsp#modal-form1" style="float: right;">添加流程</a>
							</div>
							<table class="table">
								<thead>
									<tr>
										<th>编号</th>
										<th>流程名称</th>
										<th>流程步骤数</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
								<c:forEach items="${list}" var="workflow">
									<tr class="odd gradeX">
										<td>${workflow.id}</td>
										<td>${workflow.workflowName}</td>
										<td>${workflow.stepnum}</td>
										<c:choose>
											<c:when test="${workflow.isStop== 1}">
												<td>可用</td>
												<input type="hidden" name="isStop" value="${workflow.isStop}">
											</c:when>
											<c:otherwise>
												<td>禁用</td>
											</c:otherwise>
										</c:choose>
										<td>
											<a title="查看步骤" class="t-detail" href="../step/show.do?id=${workflow.id}"><i class="iconfont icon-liebiao"></i></a>

											<a title="修改" data-toggle="modal" class="t-edit" href="form_basic.html#modal-form2" onclick="editflow('${workflow.id}','${workflow.workflowName}')"><i class="iconfont icon-shuru"></i></a>

											<a title="删除" class="t-del" onclick="ifdelete('${workflow.id}')"><i class="iconfont icon-shanchu"></i></a>

										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</div>

						<!--分页显示-->
						<div class="row">
							<div class="col-md-6">
								<div class="pagination" style="margin: 0px;" role="alert" aria-live="polite" aria-relevant="all">显示 1 到 ${workflow2.getPages()} 页 记录数${workflow2.getTotal()}</div>
							</div>
							<!-- 动态分页 -->
							<div class="row">
							<div id="page" class="col-md-6" style="text-align: right;float:right;" ></div>
							</div>
						</div>
						<!--分页显示-->
					</div>
				</div>
				<!--表格结束 -->
			</div>
		</div>


		<div id="modal-form1" class="modal fade" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<div class="row">
							<div class="col-sm-12 b-r">
								<h3 class="m-t-none m-b">添加流程</h3>
								<form role="form" id="inputForm" action="addflow.do" method="post">
									<div class="form-group">
										<label>流程名：</label>
										<input name="workflowName" id="flowName1" type="text" placeholder="请输入流程名" class="form-control">
										<label>流程状态：</label>
										<select id="flowName1" class="form-control" name="isStop">
											<option value="1">使用</option>
											<option value="0">停用</option>
										</select>
									</div>
									<div align="center">
										<input type="submit" onclick="return addok()" />
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<div id="modal-form2" class="modal fade" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<div class="row">
							<div class="col-sm-12 b-r">
								<h3 class="m-t-none m-b">修改流程</h3>
								<form role="form" id="editForm" action="editflow.do" method="post">
									<div class="form-group">
										<label>流程编号：</label>
										<input id="flowid" name="id" type="text" class="form-control" readonly="readonly">
										<label>流程名：</label>
										<input id="workflowName" name="workflowName" type="text" placeholder="请输入流程名" class="form-control">
										<label>流程状态：</label>
										<select id="isStop" name="isStop" class="form-control">
											<option value="1">使用</option>
											<option value="0">停用</option>
										</select>
									</div>
									<div align="center">
										<input type="submit" onclick="return editok()" />
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
			<script>
				function ifdelete(x) {
					var rs = confirm("您确定删除该流程吗？");
					var id=x;
					if (rs) {
						$.ajax({
				             type: "post",
				             url: "deletflow.do",
				             data: {"id":id},
				             dataType: "json",
				             success: function(data){
				                   if(data=="1"){
				                	   window.location.href="show.do";
				                   }else {
									   alert("哎呀，出错了！");
								}     
				             }
				        }); 
					} 
				}

				function editflow(x, y) {
					$("#flowid").attr("value", x);
					$("#workflowName").attr("value", y);
				}

				function addok() {
					var flowName = document.getElementById("flowName1").value;
					if(flowName != null && flowName != "") {
						return true;
					} else {
						alert("名称不能为空哦！");
						return false;
					}
				}

				function editok() {
					var flowName = document.getElementById("flowName2").value;
					if(flowName != null && flowName != "") {
						return true;
					} else {
						alert("名称不能为空哦！");
						return false;
					}
				}
				//添加操作，提交
				 $(function() {
					 // 1.基本参数设置 
				    var options = { 						
				        type: 'POST',     // 设置表单提交方式
				        dataType: 'json', 
				        url: "addflow.do",    // 设置表单提交URL,默认为表单Form上action的路径
				        success: function(responseText, statusText, xhr, $form){    // 成功后的回调函数
				            if (responseText=="1") {
				                alert("操作成功!");
				                window.location.href="show.do";
				                /* 成功后的操作 */
				            } else {
				                alert("操作失败!");    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
				            }
				        },  
				        error: function(xhr, status, err) {            
				            alert("请求失败!");    // 访问地址失败，或发生异常没有正常返回
				        },
				        clearForm: true,    // 成功提交后，清除表单填写内容
				        resetForm: true    // 成功提交后，重置表单填写内容
				    }; 
				    // 2.绑定ajaxSubmit()
				    $("#inputForm").submit(function(){     // 提交表单的id
				        $(this).ajaxSubmit(options); 
				        return false;   //防止表单自动提交
				    });
				});
				
				//修改操作，提交
				$(function() {
					 // 1.基本参数设置 
				    var eidtos = { 						
				        type: 'POST',     // 设置表单提交方式
				        dataType: 'json', 
				        url: "editflow.do",    // 设置表单提交URL,默认为表单Form上action的路径
				        success: function(responseText, statusText, xhr, $form){    // 成功后的回调函数
				            if (responseText=="1") {
				                alert("操作成功!");
				                window.location.href="show.do";
				                /* 成功后的操作 */
				            } else {
				                alert("操作失败!");    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
				            }
				        },  
				        error: function(xhr, status, err) {            
				            alert("请求失败!");    // 访问地址失败，或发生异常没有正常返回
				        },
				        clearForm: true,    // 成功提交后，清除表单填写内容
				        resetForm: true    // 成功提交后，重置表单填写内容
				    }; 
				    // 2.绑定ajaxSubmit()
				    $("#editForm").submit(function(){     // 提交表单的id
				        $(this).ajaxSubmit(eidtos); 
				        return false;   //防止表单自动提交
				    });
				});
			</script>
			
			<script>
			$(function(){
					/* 分页插件使用 */
					$("#page").page({/* #page是分页条div的id，调用分页插件page.js中封装的page函数*/
						pageNo:${workflow2.getPageNo()},/*向page函数传  当前页数，当前页数从controller获取*/
						totalPage:${workflow2.getPages()},/*向page函数传  总页数，总页数从controller获取*/
						url:"${workflow2.getUrl()}"/*向page函数传  处理分页的controller地址*/
					});
				}) 
			</script>
	</body>

</html>